<template>
  <div>
      <el-input :placeholder="mydataLabel" :style="{width:width}" @click.native="popbigtab" ref="ddlmainSelect" suffix-icon="el-icon-menu" v-model="myvalue"></el-input>
      <el-dialog :append-to-body="appendtobody" :close-on-click-modal="false" :title="mydataLabel" :visible.sync="dialogTableVisible">
          <el-container style="height: 500px; border: 1px solid #eee">
              <el-main style="overflow: hidden;">
                  <el-input @input="autosearch" @keydown.native="searchkeydown" placeholder="快速检索" prefix-icon="el-icon-search" ref="qcodeinput" style="width:300px;" v-model="qcode"></el-input>
                  <el-button @click="btnok" icon="el-icon-circle-check" style="margin-left:10px;" type="primary">确定</el-button>
                  <el-button @click="dialogTableVisible = false" icon="el-icon-circle-close" type="primary">取消</el-button>
                  <vxe-grid :columns="tableColumn" :pager-config="tablePage" :proxy-config="tableProxy" @cell-dblclick="vxselect" border height="440px" highlight-current-row highlight-hover-row ref="ddlspecimenTable" resizable size="mini" stripe style="margin-top:10px"></vxe-grid>
              </el-main>
          </el-container>
      </el-dialog>
  </div>
</template>
<script>
// import { close } from "fs";
export default {
  props: ["width", "value", "datatype", "appendtobody", "dataname", "kindno"],
  watch: {
      value(newVal) {
          this.myvalue = newVal;
          let cData = this.fulldata.Data;
          if (this.myvalue != "") {
              cData = cData.filter(item => item.hidkey == this.myvalue);
          }
          if (cData.length > 0) {
              this.myvalue = cData[0].hidname;
          }
      },
      myvalue(newVal) {
          this.$emit("input", newVal);
      }
  },
  data() {
      return {
          qcode: "",
          myvalue: this.value,
          mydataLabel: "请选择" + (this.dataname ? this.dataname : ""),
          mydatatype: this.datatype,
          mykindno: this.kindno,
          fulldata: null,
          tableColumn: [],
          tablePage: {
              pageSize: 1000
          },
          tableProxy: {
              index: true,
              props: {
                  result: "data.result",
                  total: "data.page.total"
              },
              ajax: {
                  query: param => {
                      let _this = this;
                      return new Promise((s, f) => {
                          var collist = [];
                          for (let i = 0, len = this.fulldata.Cols.length; i < len; i++) {
                              const item = this.fulldata.Cols[i];
                              let colitem = {
                                  field: item.field,
                                  title: item.title,
                                  width: item.width
                              };
                              collist.push(colitem);
                          }
                          this.tableColumn = collist;
                          let cData = this.fulldata.Data;
                          if (this.qcode != "") {
                              cData = cData.filter(item => item.hidkey.toUpperCase().indexOf(this.qcode.toUpperCase()) > -1 || item.hidname.toUpperCase().indexOf(this.qcode.toUpperCase()) > -1 || item.inputcode.toUpperCase().indexOf(this.qcode.toUpperCase()) > -1);
                          }
                          s({ data: { page: { total: cData.length }, result: cData } });
                      });
                  }
              }
          },
          dialogTableVisible: false
      };
  },
  computed: {
      myappendtobody: function() {
          return this.appendtobody;
      }
  },
  updated() {
      if (this.$refs.ddlspecimenTable) {
          if (this.fulldata.Data.length > 0) {
              this.$refs.ddlspecimenTable.setCurrentRow(this.fulldata.Data[0]);
          }
      }
      if (this.$refs.qcodeinput) {
          this.$refs.qcodeinput.focus();
      }
  },
  methods: {
      changeactiverow: function(cindex) {
          var row = this.$refs.ddlspecimenTable.getCurrentRow();
          var ridx = this.$refs.ddlspecimenTable.getRowIndex(row);
          var newidx = ridx + cindex;
          if (newidx < 0) newidx = 0;
          if (newidx >= this.fulldata.Data.length) {
              newidx = 0;
          }
          var newrow = this.fulldata.Data[newidx];
          this.$refs.ddlspecimenTable.setCurrentRow(newrow);
          this.$refs.ddlspecimenTable.scrollToRow(newrow);
      },
      searchkeydown: function(evt) {
          if (evt.keyCode == 13) {
              // console.log("按了回车");
              this.myvalue = this.$refs.ddlspecimenTable.getCurrentRow().hidname;
              if (this.myvalue) {
                  this.dialogTableVisible = false;
                  this.$emit("change", this.$refs.ddlspecimenTable.getCurrentRow().hidkey, this.$refs.ddlspecimenTable.getCurrentRow().hidname);
                  this.$emit("changeObj", {code:this.$refs.ddlspecimenTable.getCurrentRow().hidkey, name:this.$refs.ddlspecimenTable.getCurrentRow().hidname,row :""});
              }
          } else if (evt.keyCode == 40) {
              // console.log("按了向下");
              var cindex = 1;
              this.changeactiverow(cindex);
          } else if (evt.keyCode == 38) {
              // console.log("按了向上");
              var cindex = -1;
              this.changeactiverow(cindex);
          }
      },
      autosearch: function(evt) {
          if (evt.keyCode != 13 && evt.keyCode != 40 && evt.keyCode != 38) {
              // console.log("change触发");
              this.$refs.ddlspecimenTable.commitProxy("query");
              if (this.$refs.ddlspecimenTable) {
                  var rows = this.$refs.ddlspecimenTable.getTableData();
                  if (rows) {
                      var row = rows.visibleData[0];
                      if (row) {
                          // console.log("row", row);
                          this.$refs.ddlspecimenTable.setCurrentRow(row);
                      }
                  }
              }
          }
      },
      btnok: function() {
          this.myvalue = this.$refs.ddlspecimenTable.getCurrentRow().hidname;
          this.dialogTableVisible = false;
          this.$emit("change", this.$refs.ddlspecimenTable.getCurrentRow().hidkey, this.$refs.ddlspecimenTable.getCurrentRow().hidname);
          this.$emit("changeObj", {code:this.$refs.ddlspecimenTable.getCurrentRow().hidkey, name:this.$refs.ddlspecimenTable.getCurrentRow().hidname,row :""});
      },
      popbigtab: function(evt) {
          this.qcode = "";
          if (this.$refs.ddlspecimenTable) {
              this.$refs.ddlspecimenTable.commitProxy("query");
          }
          this.$refs.ddlmainSelect.blur();
          this.dialogTableVisible = true;
      },
      loadAllData: function() {
          this.$tool
              .request({
                  url: "ucent/ddl",
                  method: "post",
                  data: {
                      action: this.mydatatype,
                      kindno: this.mykindno
                  }
              })
              .then(res => {
                  this.fulldata = res;
                  if (this.fulldata.Data.length > 0) {
                      this.myvalue = this.fulldata.Data[0].hidname;
                  } else {
                      this.myvalue = "";
                  }
              })
              .catch(e => {
                  console.log("erro", e);
              });
      },
      vxselect: function(data, evt) {
          this.myvalue = data.row.hidname;
          this.dialogTableVisible = false;
          this.$emit("change", data.row.hidkey, data.row.hidname);
          this.$emit("changeObj", {code:data.row.hidkey, name:data.row.hidname,row:""});
          //this.$emit("returnBack", this.myvalue);
      }
  },
  mounted() {
      this.loadAllData();
  }
};
</script>
<style scoped>
.el-aside {
  color: #333;
}
</style>
